ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் செயல்திறன் ஒப்பீடு: நிஜ உலக பயன்பாட்டு அளவுகோல்கள்

வலை மேம்பாட்டின் எப்போதும் மாறிவரும் நிலப்பரப்பில், சரியான ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்கைத் தேர்ந்தெடுப்பது ஒரு முக்கியமான முடிவாகும். இந்தத் தேர்வு மேம்பாட்டு வேகம் மற்றும் பராமரிப்பை மட்டுமல்லாமல், பெரும்பாலும் உங்கள் பயன்பாட்டின் செயல்திறனையும் பாதிக்கிறது. இந்தக் கட்டுரை மிகவும் பிரபலமான ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளின் விரிவான செயல்திறன் ஒப்பீட்டை வழங்குகிறது, அவற்றின் பலம், பலவீனங்கள் மற்றும் பல்வேறு திட்ட வகைகளுக்கான பொருத்தத்தை பகுப்பாய்வு செய்கிறது. உங்கள் அடுத்த திட்டத்திற்கு தகவலறிந்த தேர்வுகளைச் செய்ய உங்களை அனுமதிக்கும் தரவு சார்ந்த கண்ணோட்டத்தை வழங்க நிஜ உலக பயன்பாட்டு அளவுகோல்களை நாங்கள் ஆராய்வோம்.

ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் செயல்திறனின் முக்கியத்துவத்தைப் புரிந்துகொள்ளுதல்

வலைப் பயன்பாடுகளில் செயல்திறன் என்பது நேரடியாக பயனர் அனுபவமாக மாறுகிறது. வேகமான, பதிலளிக்கக்கூடிய பயன்பாடு அதிக பயனர் ஈடுபாடு, மேம்பட்ட SEO தரவரிசைகள் மற்றும் இறுதியில், அதிக வெற்றிக்கு வழிவகுக்கிறது. மெதுவான ஏற்றுதல் நேரங்கள், தாமதமான தொடர்புகள் மற்றும் திறமையற்ற ரெண்டரிங் ஆகியவை பயனர்களை விரட்டக்கூடும். எனவே, வெவ்வேறு ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளின் செயல்திறன் பண்புகளை மதிப்பீடு செய்வது மிக முக்கியம்.

ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் செயல்திறனுக்கு பல காரணிகள் பங்களிக்கின்றன:

• தொகுப்பு அளவு (Bundle Size): உலாவியால் பதிவிறக்கம் செய்யப்படும் ஜாவாஸ்கிரிப்ட் கோப்புகளின் அளவு. சிறிய தொகுப்புகள் வேகமான ஆரம்ப ஏற்றுதல் நேரங்களுக்கு வழிவகுக்கும்.
• ரெண்டரிங் வேகம்: தரவு மாற்றங்கள் அல்லது பயனர் தொடர்புகளுக்கு பதிலளிக்கும் விதமாக பயனர் இடைமுகத்தைப் புதுப்பிக்க ஃபிரேம்வொர்க் எடுக்கும் நேரம்.
• நினைவகப் பயன்பாடு: ஃபிரேம்வொர்க் நுகரும் நினைவகத்தின் அளவு, குறிப்பாக வளம் குறைந்த சாதனங்களில் செயல்திறனைப் பாதிக்கிறது.
• DOM கையாளுதல்: ஃபிரேம்வொர்க் ஆவண பொருள் மாதிரியுடன் (DOM) தொடர்பு கொள்ளும் திறன்.
• ஃபிரேம்வொர்க் கூடுதல் சுமை: ஃபிரேம்வொர்க்கின் உள்ளார்ந்த கணக்கீட்டுச் செலவு.

இந்த பகுப்பாய்வு ஒரு முழுமையான செயல்திறன் படத்தை வழங்க இந்த ஒவ்வொரு பகுதியையும் ஆராயும்.

பரிசீலனையில் உள்ள ஃபிரேம்வொர்க்குகள்

எங்கள் செயல்திறன் ஒப்பீட்டிற்காக பின்வரும் பிரபலமான ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளில் கவனம் செலுத்துவோம்:

• ரியாக்ட் (React): ஃபேஸ்புக் (மெட்டா) மூலம் உருவாக்கப்பட்டு பராமரிக்கப்படும், ரியாக்ட் என்பது பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு கூறு அடிப்படையிலான நூலகமாகும். இது அதன் மெய்நிகர் DOM-க்கு பெயர் பெற்றது, திறமையான புதுப்பிப்புகளை அனுமதிக்கிறது.
• ஆங்குலர் (Angular): கூகிளால் உருவாக்கப்பட்டு பராமரிக்கப்படுகிறது, ஆங்குலர் ஒரு விரிவான ஃபிரேம்வொர்க் ஆகும், இது டைப்ஸ்கிரிப்ட்டைப் பயன்படுத்துகிறது மற்றும் சிக்கலான வலைப் பயன்பாடுகளை உருவாக்குவதற்கு ஒரு கட்டமைக்கப்பட்ட அணுகுமுறையை வழங்குகிறது.
• வியூ.js (Vue.js): அதன் நெகிழ்வுத்தன்மை மற்றும் பயன்பாட்டின் எளிமைக்காக அறியப்பட்ட ஒரு முற்போக்கான ஃபிரேம்வொர்க். அதன் மென்மையான கற்றல் வளைவு மற்றும் செயல்திறன் காரணமாக இது பிரபலமடைந்து வருகிறது.
• ஸ்வெல்ட் (Svelte): ஒரு கம்பைலர், இது குறியீட்டை பில்ட் நேரத்தில் மிகவும் உகந்ததாக்கப்பட்ட வெண்ணிலா ஜாவாஸ்கிரிப்டாக மாற்றுகிறது. இது ஒரு மெய்நிகர் DOM-க்கான தேவையை நீக்குவதன் மூலம் விதிவிலக்கான செயல்திறனை நோக்கமாகக் கொண்டுள்ளது.

அளவுகோல் முறை மற்றும் கருவிகள்

ஒரு நியாயமான மற்றும் நம்பகமான ஒப்பீட்டை உறுதிப்படுத்த, பின்வரும் அளவுகோல் முறையைப் பயன்படுத்துவோம்:

• நிஜ உலக பயன்பாட்டு அளவுகோல்கள்: நிஜ உலக பயன்பாட்டு காட்சிகளை உருவகப்படுத்தும் அளவுகோல்களைப் பயன்படுத்தி ஃபிரேம்வொர்க்குகளின் செயல்திறனை நாங்கள் பகுப்பாய்வு செய்வோம். இதில் பின்வரும் பணிகள் அடங்கும்:
• பெரிய உருப்படிகளின் பட்டியலை ரெண்டரிங் செய்தல் (எ.கா., தயாரிப்பு பட்டியல்களைக் காண்பித்தல்).
• பயனர் தொடர்புகளைக் கையாளுதல் (எ.கா., தரவை வடிகட்டுதல், வரிசைப்படுத்துதல் மற்றும் தேடுதல்).
• அடிக்கடி தரவு மாற்றங்களுடன் பயனர் இடைமுகத்தைப் புதுப்பித்தல் (எ.கா., நிகழ்நேர தரவு ஊட்டங்கள்).
• ஆரம்ப ஏற்றுதல் நேர பகுப்பாய்வு
• கருவிகள்: செயல்திறனை அளவிட தொழில்-தரமான கருவிகளைப் பயன்படுத்துவோம், அவற்றுள்:
• வெப்பேஜ்டெஸ்ட் (WebPageTest): இணையதள செயல்திறனை அளவிடுவதற்கும் பகுப்பாய்வு செய்வதற்கும் ஒரு இலவச, திறந்த மூல கருவி, ஏற்றுதல் நேரங்கள், ரெண்டரிங் அளவீடுகள் மற்றும் பலவற்றைப் பற்றிய விரிவான நுண்ணறிவுகளை வழங்குகிறது.
• லைட்ஹவுஸ் (Lighthouse): உங்கள் வலைப் பயன்பாடுகளின் செயல்திறன், தரம் மற்றும் சரியான தன்மையை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவி. இது செயல்திறன், அணுகல்தன்மை, முற்போக்கான வலைப் பயன்பாடுகள், SEO மற்றும் பலவற்றிற்கான தணிக்கைகளை இயக்குகிறது.
• குரோம் டெவ்டூல்ஸ் செயல்திறன் தாவல்: CPU பயன்பாடு, நினைவக ஒதுக்கீடு மற்றும் ரெண்டரிங் புள்ளிவிவரங்கள் உட்பட ஆழமான செயல்திறன் பகுப்பாய்வை அனுமதிக்கிறது.
• தனிப்பயன் அளவுகோல் ஸ்கிரிப்டுகள்: ஒரு கட்டுப்படுத்தப்பட்ட சூழலில் குறிப்பிட்ட செயல்திறன் அம்சங்களை அளவிட benchmark.js போன்ற நூலகங்களைப் பயன்படுத்தி தனிப்பயன் அளவுகோல் ஸ்கிரிப்டுகளை உருவாக்குவோம்.
• கட்டுப்படுத்தப்பட்ட சூழல்: வெளிப்புற மாறிகளைக் குறைக்க அளவுகோல்கள் ஒரு நிலையான வன்பொருள் மற்றும் மென்பொருள் உள்ளமைவில் நடத்தப்படும். இதில் ஒரே மாதிரியான உலாவிகள், பிணைய நிலைகள் (உருவகப்படுத்தப்பட்டவை) மற்றும் இயக்க முறைமைகளின் பயன்பாடு ஆகியவை அடங்கும். ஜாவாஸ்கிரிப்ட் இயந்திரம் இலக்கு உலாவிக்கு உகந்ததாக இருப்பதை நாங்கள் உறுதி செய்வோம்.

குறிப்பு: பயன்பாட்டின் சிக்கலான தன்மை, பயன்படுத்தப்படும் மேம்படுத்தல் நுட்பங்கள் மற்றும் இறுதிப் பயனரின் வன்பொருள் மற்றும் பிணைய இணைப்பு போன்ற காரணிகளைப் பொறுத்து குறிப்பிட்ட முடிவுகள் மாறுபடும். எனவே, முடிவுகள் வழிகாட்டுதல்களாகப் பொருள் கொள்ளப்பட வேண்டும், முழுமையான மதிப்புகள் அல்ல.

செயல்திறன் ஒப்பீடு: முக்கிய கண்டுபிடிப்புகள்

செயல்திறன் ஒப்பீடு பின்வரும் முக்கிய பகுதிகளில் வழங்கப்படும்:

1. தொகுப்பு அளவு மற்றும் ஆரம்ப ஏற்றுதல் நேரம்

சிறிய தொகுப்பு அளவுகள் பொதுவாக வேகமான ஆரம்ப ஏற்றுதல் நேரங்களுடன் தொடர்புடையவை. ஒவ்வொரு ஃபிரேம்வொர்க்கின் சுருக்கப்பட்ட மற்றும் ஜிப் செய்யப்பட்ட தொகுப்பு அளவுகளையும், ஆரம்ப ரெண்டர் நேரங்களில் அவற்றின் தாக்கத்தையும் ஆராய்வோம். இந்த அடிப்படை ஒப்பீட்டிற்கு நாங்கள் ஒரு எளிய "ஹலோ வேர்ல்ட்" பயன்பாட்டைப் பயன்படுத்துகிறோம்.

• ரியாக்ட்: பொதுவாக Vue.js அல்லது Svelte உடன் ஒப்பிடும்போது ஒரு பெரிய தொகுப்பு அளவைக் கொண்டுள்ளது, குறிப்பாக ரியாக்ட் DOM மற்றும் பிற தொடர்புடைய நூலகங்களின் தேவையைக் கருத்தில் கொள்ளும்போது. ஆரம்ப ஏற்றுதல் நேரங்கள் Svelte உடன் ஒப்பிடும்போது மெதுவாக இருக்கலாம், ஆனால் குறியீடு பிரித்தல் மற்றும் சோம்பேறி ஏற்றுதல் ஆகியவற்றைப் பயன்படுத்துவது இந்த சிக்கலைத் தணிக்கும்.
• ஆங்குலர்: அதன் விரிவான தன்மை மற்றும் டைப்ஸ்கிரிப்ட் காரணமாக, ஆங்குலர் பயன்பாடுகள் ரியாக்ட் அல்லது Vue.js ஐ விட பெரிய தொகுப்பு அளவுகளைக் கொண்டிருக்கின்றன, இருப்பினும் சமீபத்திய பதிப்புகளில் குறிப்பிடத்தக்க முன்னேற்றங்கள் செய்யப்பட்டுள்ளன.
• வியூ.js: வியூ.js ஒரு நல்ல சமநிலையை வழங்குகிறது, இது பெரும்பாலும் ரியாக்ட் அல்லது ஆங்குலரை விட சிறிய தொகுப்பு அளவுகளில் விளைகிறது, இது வேகமான ஆரம்ப ஏற்றுதல் நேரங்களுக்கு வழிவகுக்கிறது.
• ஸ்வெல்ட்: ஸ்வெல்ட் குறியீட்டை பில்ட் நேரத்தில் தொகுப்பதால், இதன் விளைவாக வரும் தொகுப்பு அளவு பெரும்பாலும் நான்கு ஃபிரேம்வொர்க்குகளிலும் மிகச் சிறியதாக இருக்கும், இது மிக வேகமான ஆரம்ப ஏற்றுதல் நேரங்களில் விளைகிறது.

உதாரணம்: ஒரு மின்-வணிக பயன்பாட்டைக் கவனியுங்கள். தயாரிப்பு பட்டியல்களுக்கான ஒரு சிறிய ஆரம்ப தொகுப்பு அளவு பயனரின் கவனத்தை விரைவாகப் பிடிக்க மிகவும் முக்கியமானது. ஜப்பானில் உள்ள ஒரு பயனர் மெதுவாக ஏற்றப்படும் தளத்தை எதிர்கொண்டால், இது ஒரு சாத்தியமான விற்பனையை இழக்க நேரிடலாம். பிரேசில் அல்லது கனடாவில் உள்ள ஒரு பயனருக்கும் இதே கருத்து பொருந்தும். ஒவ்வொரு வினாடியும் உலகளவில் முக்கியமானது!

2. ரெண்டரிங் செயல்திறன்

ரெண்டரிங் செயல்திறன் என்பது தரவு மாற்றங்கள் அல்லது பயனர் தொடர்புகளுக்கு பதிலளிக்கும் விதமாக ஃபிரேம்வொர்க் எவ்வளவு விரைவாக பயனர் இடைமுகத்தைப் புதுப்பிக்கிறது என்பதை அளவிடுகிறது. இதில் ஆரம்ப ரெண்டரிங் மற்றும் புதுப்பிப்புகளுக்குப் பிறகு மீண்டும் ரெண்டரிங் செய்வது ஆகிய இரண்டும் அடங்கும். முக்கிய அளவீடுகளில் முதல் உள்ளடக்க வண்ணப்பூச்சுக்கான நேரம் (TTFCP), ஊடாடும் நேரம் (TTI), மற்றும் வினாடிக்கு பிரேம்கள் (FPS) ஆகியவை அடங்கும்.

• ரியாக்ட்: மெய்நிகர் DOM திறமையான மறு-ரெண்டரிங்கை அனுமதிக்கிறது, இருப்பினும், செயல்திறன் கூறு மரத்தின் சிக்கலான தன்மை மற்றும் React.memo மற்றும் useMemo போன்ற கூறு மேம்படுத்தல் நுட்பங்களின் செயல்திறனைப் பொறுத்தது.
• ஆங்குலர்: ஆங்குலரின் மாற்றத்தைக் கண்டறியும் பொறிமுறையை OnPush மாற்றத்தைக் கண்டறிதல் போன்ற நுட்பங்கள் மூலம் மேம்படுத்தலாம், ஆனால் கவனமாக நிர்வகிக்கப்படாவிட்டால் பெரிய, சிக்கலான பயன்பாடுகளில் செயல்திறன் பாதிக்கப்படலாம்.
• வியூ.js: வியூ.js இன் எதிர்வினை அமைப்பு மற்றும் மெய்நிகர் DOM ஆகியவை பொதுவாக செயல்திறன் மிக்கதாக ஆக்குகின்றன, மேலும் இது பெரும்பாலும் வேகம் மற்றும் மேம்பாட்டின் எளிமைக்கு இடையில் ஒரு நல்ல சமநிலையை வழங்குகிறது.
• ஸ்வெல்ட்: ஸ்வெல்ட் குறியீட்டை மிகவும் உகந்ததாக்கப்பட்ட வெண்ணிலா ஜாவாஸ்கிரிப்டாகத் தொகுக்கிறது. இது மெய்நிகர் DOM சமரசத்தின் இயக்க நேர கூடுதல் சுமையைத் தவிர்ப்பதால், மிக வேகமான ரெண்டரிங் வேகத்தில் விளைகிறது. இது ரெண்டரிங் செயல்திறனில் மிகவும் போட்டித்தன்மை வாய்ந்ததாக ஆக்குகிறது.

உதாரணம்: பங்கு விலைகளைக் காண்பிக்கும் ஒரு நிகழ்நேர டாஷ்போர்டு. ரியாக்ட் மற்றும் வியூ இரண்டும் அடிக்கடி ஏற்படும் புதுப்பிப்புகளை திறம்பட கையாள உகந்ததாக மாற்றப்படலாம்; இருப்பினும், ஸ்வெல்ட்டின் கட்டமைப்பு அதை இங்கே சிறந்து விளங்கச் செய்கிறது. லண்டனைச் சேர்ந்த ஒரு பயனருக்கு, மெதுவாகப் புதுப்பிக்கும் டாஷ்போர்டு வர்த்தக வாய்ப்புகளைத் தவறவிட வழிவகுக்கும். எனவே உயர் செயல்திறன் மிகவும் முக்கியமானது.

3. நினைவகப் பயன்பாடு

நினைவகப் பயன்பாடு செயல்திறனின் மற்றொரு முக்கிய அம்சமாகும். அதிக நினைவக நுகர்வு செயல்திறன் சிதைவுக்கு வழிவகுக்கும், குறிப்பாக மொபைல் சாதனங்களில் அல்லது வளம் குறைந்த சூழல்களில் இயங்கும் பயன்பாடுகளில். ஆரம்ப ரெண்டர், பயனர் தொடர்புகள் மற்றும் மறு-ரெண்டர்களின் போது நினைவக தடத்தை அளவிடுவது முக்கியம்.

• ரியாக்ட்: ரியாக்ட் சில நேரங்களில் மற்ற சில ஃபிரேம்வொர்க்குகளுடன் ஒப்பிடும்போது அதிக நினைவகத்தை நுகரக்கூடும், குறிப்பாக அதிக அளவு தரவைக் கையாளும் பயன்பாடுகளில்.
• ஆங்குலர்: ஆங்குலர், அதன் அம்சங்கள் மற்றும் சிக்கலான தன்மை காரணமாக, சில நேரங்களில் வியூ அல்லது ஸ்வெல்ட்டை விட அதிக நினைவகத் தடத்தைக் கொண்டிருக்கலாம்.
• வியூ.js: வியூ.js பொதுவாக ரியாக்ட் மற்றும் ஆங்குலரை விட குறைந்த நினைவகத் தடத்தைக் கொண்டுள்ளது.
• ஸ்வெல்ட்: ஸ்வெல்ட் அதன் தொகுப்பு-நேர அணுகுமுறை மற்றும் குறைக்கப்பட்ட இயக்க நேர கூடுதல் சுமை காரணமாக பெரும்பாலும் குறைந்த நினைவகத் தடத்தைக் கொண்டுள்ளது.

உதாரணம்: இந்தியா போன்ற ஒரு நாட்டின் சிக்கலான வரைபடத்தைக் காட்ட வேண்டிய ஒரு மொபைல் பயன்பாட்டைக் கவனியுங்கள். குறைந்த நினைவகப் பயன்பாடு ஒரு நல்ல பயனர் அனுபவத்திற்கு முக்கியமானது மற்றும் பயன்பாடு செயலிழப்பதைத் தடுக்கிறது. இதேபோன்ற சிக்கல்கள் உலகளவில் பயனர்களைப் பாதிக்கக்கூடும், உதாரணமாக, குறைந்த சக்தி கொண்ட சாதனங்களைக் கொண்ட அடர்த்தியான நகர்ப்புறங்களில்.

4. DOM கையாளுதல்

திறமையான DOM கையாளுதல் வேகமான ரெண்டரிங் மற்றும் பதிலளிக்கக்கூடிய தன்மைக்கு முக்கியமானது. ஃபிரேம்வொர்க் DOM உடன் எவ்வாறு தொடர்பு கொள்கிறது என்பது செயல்திறனின் ஒரு முக்கிய தீர்மானமாகும். ஃபிரேம்வொர்க்குகள் DOM கூறுகளை உருவாக்குதல், புதுப்பித்தல் மற்றும் நீக்குதல் ஆகியவற்றை எவ்வாறு கையாளுகின்றன என்பதை நாம் மதிப்பிட வேண்டும்.

• ரியாக்ட்: ரியாக்ட் புதுப்பிப்புகளை தொகுக்க மற்றும் நேரடி DOM கையாளுதல்களைக் குறைக்க ஒரு மெய்நிகர் DOM ஐப் பயன்படுத்துகிறது.
• ஆங்குலர்: ஆங்குலரின் மாற்றத்தைக் கண்டறியும் பொறிமுறை மற்றும் ஒரு பெரிய DOM-க்கு புதுப்பிப்புகளைச் செய்யும் திறன் DOM கையாளுதல் செயல்திறனைப் பாதிக்கலாம்.
• வியூ.js: வியூ.js ஒரு மெய்நிகர் DOM ஐப் பயன்படுத்துகிறது, மேலும் இது DOM புதுப்பிப்பு செயல்திறனை மேம்படுத்த மேம்படுத்தல்களையும் வழங்குகிறது.
• ஸ்வெல்ட்: ஸ்வெல்ட் மெய்நிகர் DOM ஐ முற்றிலுமாகத் தவிர்க்கிறது. இது தொகுக்கும் நேரத்தில் நேரடி DOM கையாளுதலைச் செய்கிறது, இதன் விளைவாக உகந்ததாக்கப்பட்ட புதுப்பிப்புகள் கிடைக்கின்றன.

உதாரணம்: வரைதல் பயன்பாடுகள் போன்ற DOM கையாளுதலை மிகவும் சார்ந்துள்ள ஊடாடும் பயன்பாடுகள், திறமையான DOM கையாளுதலால் பெரிதும் பயனடையலாம். நைஜீரியா அல்லது ஆஸ்திரேலியாவில் உள்ள ஒரு கலைஞருக்கு, தாமதமான பயன்பாடு அவர்களின் பணிப்பாய்வின் தரத்தைப் பாதிக்கலாம்.

5. ஃபிரேம்வொர்க் கூடுதல் சுமை

ஃபிரேம்வொர்க்கின் கூடுதல் சுமை, அதாவது அது செயல்படத் தேவைப்படும் வளங்கள் (CPU, நினைவகம்), ஒட்டுமொத்த செயல்திறனைப் பாதிக்கிறது. இது பெரும்பாலும் ஃபிரேம்வொர்க்கின் உள் சிக்கலான தன்மை மற்றும் அதன் கட்டமைப்புடன் தொடர்புடையது. பயன்பாட்டு செயல்பாட்டின் போது ஃபிரேம்வொர்க்கின் CPU பயன்பாடு மற்றும் நினைவகப் பயன்பாட்டை அளவிடுவது அவசியம்.

• ரியாக்ட்: ஃபிரேம்வொர்க்கின் கூடுதல் சுமை மிதமானது. ரியாக்டின் மெய்நிகர் DOM புதுப்பிப்புகளை சமரசம் செய்ய ஒரு குறிப்பிட்ட அளவு வளங்கள் தேவை.
• ஆங்குலர்: ஆங்குலர் அதன் அம்சங்கள் மற்றும் வடிவமைப்பு காரணமாக அதிக ஃபிரேம்வொர்க் கூடுதல் சுமையைக் கொண்டுள்ளது.
• வியூ.js: வியூ.js ஒப்பீட்டளவில் குறைந்த ஃபிரேம்வொர்க் கூடுதல் சுமையைக் கொண்டுள்ளது.
• ஸ்வெல்ட்: ஸ்வெல்ட், வெண்ணிலா ஜாவாஸ்கிரிப்டுக்குத் தொகுக்கப்படுவதால், குறைந்தபட்ச ஃபிரேம்வொர்க் கூடுதல் சுமையைக் கொண்டுள்ளது.

உதாரணம்: தென்கிழக்கு ஆசியா அல்லது தென் அமெரிக்கா போன்ற வளரும் பொருளாதாரங்களில் பொதுவாகப் பயன்படுத்தப்படும் குறைந்த சக்தி கொண்ட சாதனங்களில் பயன்பாடுகளைப் பயன்படுத்தும்போது அதிக கூடுதல் சுமை ஒரு எதிர்மறையான காரணியாகும். பயன்பாடு மெதுவாக இயங்கக்கூடும்.

ஒப்பீட்டு அட்டவணை

பின்வரும் அட்டவணை ஒவ்வொரு ஃபிரேம்வொர்க்கின் செயல்திறன் பண்புகளையும் சுருக்கமாகக் கூறுகிறது. மதிப்புகள் பொதுவான முடிவுகளை அடிப்படையாகக் கொண்டவை; பயன்பாட்டின் பிரத்தியேகங்களைப் பொறுத்து உண்மையான செயல்திறன் மாறுபடலாம்.

அம்சம்	ரியாக்ட்	ஆங்குலர்	வியூ.js	ஸ்வெல்ட்
தொகுப்பு அளவு (சிறியது சிறந்தது)	நடுத்தர-பெரியது	பெரியது	நடுத்தர-சிறியது	மிகச் சிறியது
ஆரம்ப ஏற்றுதல் நேரம் (வேகமானது சிறந்தது)	நடுத்தரம்	மிக மெதுவானது	வேகமானது	மிக வேகமானது
ரெண்டரிங் வேகம் (வேகமானது சிறந்தது)	நல்லது	நல்லது	மிக நல்லது	சிறப்பானது
நினைவகப் பயன்பாடு (குறைந்தது சிறந்தது)	நடுத்தர-அதிகம்	அதிகம்	நடுத்தரம்	மிகக் குறைவு
DOM கையாளுதல் (வேகமானது சிறந்தது)	திறமையானது (மெய்நிகர் DOM)	திறமையானது (மேம்படுத்தல்களுடன்)	திறமையானது (மெய்நிகர் DOM)	மிகவும் திறமையானது (நேரடி DOM)
ஃபிரேம்வொர்க் கூடுதல் சுமை (குறைந்தது சிறந்தது)	மிதமானது	அதிகம்	குறைவு	மிகக் குறைவு

நிஜ உலக பயன்பாட்டு எடுத்துக்காட்டுகள் மற்றும் அளவுகோல்கள்

நிஜ உலக செயல்திறன் வேறுபாடுகளை விளக்க, கற்பனையான அளவுகோல் முடிவுகளுடன் பின்வரும் பயன்பாட்டு எடுத்துக்காட்டுகளைக் கவனியுங்கள்:

எடுத்துக்காட்டு 1: மின்-வணிக தயாரிப்பு பட்டியல் பக்கம்

சூழல்: வடிகட்டுதல், வரிசைப்படுத்துதல் மற்றும் பக்க எண்களுடன் கூடிய ஒரு பெரிய தயாரிப்பு பட்டியலைக் காண்பித்தல். பயனர்கள் உலகளவில், மாறுபட்ட இணைய இணைப்புடன் உள்ளனர்.

• அளவுகோல்: 1000 தயாரிப்பு பட்டியல்களுக்கான ஏற்றுதல் நேரம்.
• முடிவுகள் (கற்பனையானவை):
• ரியாக்ட்: ஏற்றுதல் நேரம்: 1.8 வினாடிகள்
• ஆங்குலர்: ஏற்றுதல் நேரம்: 2.5 வினாடிகள்
• வியூ.js: ஏற்றுதல் நேரம்: 1.5 வினாடிகள்
• ஸ்வெல்ட்: ஏற்றுதல் நேரம்: 1.2 வினாடிகள்
• நுண்ணறிவு: ஸ்வெல்ட்டின் வேகமான ஆரம்ப ஏற்றுதல் நேரம் மற்றும் ரெண்டரிங் வேகம் சிறந்த பயனர் அனுபவமாக மாறும், குறிப்பாக மெதுவான இணைய இணைப்புகளைக் கொண்ட பகுதிகளில். இந்தியா அல்லது அர்ஜென்டினாவின் கிராமப்புறப் பகுதியில் உள்ள ஒரு பயனர் ஸ்வெல்ட்டின் செயல்திறனால் பயனடையலாம்.

எடுத்துக்காட்டு 2: நிகழ்நேர தரவு டாஷ்போர்டு

சூழல்: அடிக்கடி புதுப்பிக்கப்படும் நிகழ்நேர பங்கு விலைகளைக் காண்பிக்கும் ஒரு நிதி டாஷ்போர்டு. பயனர்கள் பல்வேறு உலகளாவிய நிதி மையங்களில் உள்ளனர்.

• அளவுகோல்: வினாடிக்கு 1000 தரவுப் புள்ளிகளைப் புதுப்பிப்பதில் செயல்திறன்.
• முடிவுகள் (கற்பனையானவை):
• ரியாக்ட்: FPS: 55
• ஆங்குலர்: FPS: 48
• வியூ.js: FPS: 60
• ஸ்வெல்ட்: FPS: 65
• நுண்ணறிவு: ஸ்வெல்ட்டின் அதிக பிரேம் வீதம் சிறந்த செயல்திறனை வழங்குகிறது, மென்மையான புதுப்பிப்புகளை உறுதி செய்கிறது. டோக்கியோ அல்லது நியூயார்க்கில் உள்ள ஒரு வர்த்தகர் நிலையற்ற சந்தைகளைக் கண்காணிப்பதில் பயன்பாட்டின் பதிலளிக்கக்கூடிய தன்மையைப் பாராட்டுவார்.

எடுத்துக்காட்டு 3: ஊடாடும் வரைபடப் பயன்பாடு

சூழல்: புவியியல் தகவல்களைக் காண்பிப்பதற்கான ஒரு ஊடாடும் வரைபடப் பயன்பாடு, ஜூமிங், பான் செய்தல் மற்றும் தனிப்பயன் மேலடுக்குகள் போன்ற அம்சங்களுடன். பயனர்கள் உலகளவில் உள்ளனர்.

• அளவுகோல்: ஒரு பெரிய வரைபடப் பகுதி முழுவதும் பான் செய்தல் மற்றும் ஜூம் இன் மற்றும் அவுட் செய்வதன் செயல்திறன்.
• முடிவுகள் (கற்பனையானவை):
• ரியாக்ட்: நினைவகப் பயன்பாடு: 200MB
• ஆங்குலர்: நினைவகப் பயன்பாடு: 250MB
• வியூ.js: நினைவகப் பயன்பாடு: 180MB
• ஸ்வெல்ட்: நினைவகப் பயன்பாடு: 150MB
• நுண்ணறிவு: ஸ்வெல்ட்டின் குறைந்த நினைவக நுகர்வு மொபைல் சாதனங்கள் மற்றும் வரையறுக்கப்பட்ட வளங்களைக் கொண்ட பயனர்களுக்கு ஒரு நல்ல தேர்வாக அமைகிறது.

ஃபிரேம்வொர்க் செயல்திறன் கருத்தாய்வுகள்

ஃபிரேம்வொர்க் செயல்திறனைக் கருத்தில் கொள்ளும்போது, இந்த காரணிகளை மனதில் கொள்ளுங்கள்:

• மேம்படுத்தல் நுட்பங்கள்: அனைத்து ஃபிரேம்வொர்க்குகளையும் கவனமான குறியீட்டு முறைகள், குறியீடு பிரித்தல், சோம்பேறி ஏற்றுதல் மற்றும் கூறு நினைவூட்டல் போன்றவற்றின் மூலம் மேம்படுத்தலாம்.
• திட்டத்தின் சிக்கலான தன்மை: ஃபிரேம்வொர்க் தேர்வு திட்டத்தின் சிக்கலான தன்மையுடன் ஒத்துப்போக வேண்டும். பெரிய, சிக்கலான பயன்பாடுகளுக்கு, ஆங்குலரின் கட்டமைக்கப்பட்ட அணுகுமுறை செயல்திறன் கருத்தாய்வுகளுடன் கூட சாதகமாக இருக்கலாம்.
• குழுவின் நிபுணத்துவம்: ஒவ்வொரு ஃபிரேம்வொர்க்குடனும் மேம்பாட்டுக் குழுவின் பரிச்சயத்தைக் கருத்தில் கொள்ளுங்கள். அனுபவமற்ற டெவலப்பர்களால் செயல்திறன் ஆதாயங்கள் குறைக்கப்படுகின்றன.
• மூன்றாம் தரப்பு நூலகங்கள்: மூன்றாம் தரப்பு நூலகங்களின் பயன்பாடு செயல்திறனில் குறிப்பிடத்தக்க தாக்கத்தை ஏற்படுத்தும். உகந்ததாக்கப்பட்ட மற்றும் நன்கு பராமரிக்கப்படும் நூலகங்களைத் தேர்ந்தெடுக்கவும்.
• உலாவி இணக்கத்தன்மை: உலாவி இணக்கத்தன்மை தேவைகளைக் கருத்தில் கொள்ளுங்கள். பழைய உலாவிகள் செயல்திறன் சவால்களை அளிக்கக்கூடும், அவை தீர்க்கப்பட வேண்டும்.

டெவலப்பர்களுக்கான செயல் நுண்ணறிவுகள்

ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் செயல்திறனை மேம்படுத்த விரும்பும் டெவலப்பர்களுக்கான சில செயல் குறிப்புகள் இங்கே:

• குறியீடு பிரித்தல்: உங்கள் பயன்பாட்டின் ஒவ்வொரு பகுதிக்கும் தேவையான குறியீட்டை மட்டும் ஏற்றுவதற்கு குறியீடு பிரித்தலைச் செயல்படுத்தவும், ஆரம்ப ஏற்றுதல் நேரங்களை மேம்படுத்தவும். இது குறிப்பாக ஆங்குலர் பயன்பாடுகளுக்கு முக்கியமானது.
• சோம்பேறி ஏற்றுதல்: படங்கள், கூறுகள் மற்றும் பிற வளங்களுக்கு சோம்பேறி ஏற்றுதலைப் பயன்படுத்தி, அவை தேவைப்படும் வரை அவற்றின் ஏற்றுதலை ஒத்திவைக்கவும்.
• கூறு மேம்படுத்தல்: நினைவூட்டல் (ரியாக்ட், வியூ), OnPush மாற்றத்தைக் கண்டறிதல் (ஆங்குலர்) மற்றும் கூறு மேம்படுத்தல் போன்ற நுட்பங்களைப் பயன்படுத்தி தேவையற்ற மறு-ரெண்டர்களைக் குறைக்கவும்.
• சுயவிவரக் கருவிகள்: செயல்திறன் தடைகளைக் கண்டறிய உலாவி டெவலப்பர் கருவிகளை (குரோம் டெவ்டூல்ஸ், ஃபயர்பாக்ஸ் டெவலப்பர் டூல்ஸ்) தவறாமல் பயன்படுத்தவும்.
• DOM கையாளுதல்களைக் குறைத்தல்: நேரடி DOM கையாளுதல்களைக் குறைத்து, ஃபிரேம்வொர்க்கால் வழங்கப்படும் திறமையான தரவு பிணைப்பு நுட்பங்களைப் பயன்படுத்தவும்.
• தொகுப்பு மேம்படுத்தல்: ஜாவாஸ்கிரிப்ட் தொகுப்புகளின் அளவைக் குறைக்க ட்ரீ-ஷேக்கிங் மற்றும் மினிஃபிகேஷன் போன்ற உருவாக்கக் கருவிகள் மற்றும் நுட்பங்களைப் பயன்படுத்தவும்.
• உகந்ததாக்கப்பட்ட நூலகங்களைத் தேர்வுசெய்க: செயல்திறனுக்காக உகந்ததாக்கப்பட்ட மூன்றாம் தரப்பு நூலகங்களைத் தேர்ந்தெடுக்கவும். முடிந்தவரை பெரிய, உகந்ததாக்கப்படாத நூலகங்களைத் தவிர்க்கவும்.
• தவறாமல் சோதிக்கவும்: மேம்பாட்டு செயல்முறை முழுவதும் செயல்திறன் சோதனைகளை நடத்தவும், முடிவில் மட்டும் அல்ல.

முடிவுரை

ஒரு ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்கின் தேர்வு பயன்பாட்டு செயல்திறனை கணிசமாக பாதிக்கிறது. ஒவ்வொரு ஃபிரேம்வொர்க்கிற்கும் அதன் பலம் இருந்தாலும், ஸ்வெல்ட் பெரும்பாலும் தொகுப்பு அளவு மற்றும் ரெண்டரிங் வேகத்தில் சிறந்து விளங்குகிறது. ரியாக்ட் மற்றும் வியூ.js நெகிழ்வுத்தன்மையுடன் நல்ல செயல்திறனை வழங்குகின்றன, அதே நேரத்தில் ஆங்குலர் ஒரு கட்டமைக்கப்பட்ட அணுகுமுறையை வழங்குகிறது, இருப்பினும் பெரும்பாலும் ஒரு பெரிய தடம் கொண்டது. உகந்த தேர்வு குறிப்பிட்ட திட்டத் தேவைகள், குழுவின் நிபுணத்துவம் மற்றும் செயல்திறன் இலக்குகளைப் பொறுத்தது. இந்த செயல்திறன் பண்புகளைப் புரிந்துகொண்டு பொருத்தமான மேம்படுத்தல் நுட்பங்களைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் உலகளாவிய பார்வையாளர்களுக்காக உயர் செயல்திறன் கொண்ட, பயனர் நட்பு வலைப் பயன்பாடுகளை உருவாக்க முடியும்.

இறுதியில், சிறந்த ஃபிரேம்வொர்க் என்பது உங்கள் திட்டத்தின் தேவைகளைப் பூர்த்தி செய்யும் அதே வேளையில், உலகம் முழுவதும் தடையற்ற மற்றும் செயல்திறன் மிக்க பயனர் அனுபவத்தை வழங்கும் ஒன்றாகும். உங்களுக்கு எது சிறந்தது என்பதைத் தீர்மானிக்க வழங்கப்பட்ட அனைத்து விருப்பங்களையும் சோதித்துப் பாருங்கள்.